<template>
  <div>
    <router-link to="/detail/iphone">苹果</router-link>
    <router-link to="/detail/xiaomi">小米</router-link>
    <p>{{msg}}</p>
    <br>
    <br>
    <img :src="src">
    <!-- 获取url中的参数，情况1：?之前的数据 -->
    ?前的数据，用params：{{$route.params.name}}的详情
    <br><br><br>
    <!-- 获取url中的参数，情况2：?之后的数据 -->
    ?前的数据，用query：{{$route.query.name}}----{{$route.query.age}}的详情
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: 'hello',
      src: '',
      token: ''
    }
  },
  // watch:{
  //   // 监听路由，当路由变化时，更新数据
  //   $route(to, from) {
  //     this.getData();
  //   }
  // },
  // 组件内的路由守卫，当组件更新时触发
  // beforeRouteUpdate(to, from, next) {
  //   this.getData();
  //   next();
  // },
  created() {
    console.log(this.$route.params.name);
    this.msg +=  ' offcn';
    // 获取数据，调用获取数据的函数
    this.getData();
  },
  methods: {
    // 这里才是真的发请求
    getData() {
      // 默认是get请求
      // this.axios.get('https://api.imjad.cn/cloudmusic/?type=detail&id=28012031&br=128000')
      this.axios.get('https://api.imjad.cn/cloudmusic', {
        params: {
          type: 'detail',
          id: 28012031,
          br: 128000
        }
      })
      // then是成功的回调
        .then(data => {
          // 打印出来数据，看看都有啥
          console.log(data.data);
          // 修改源数据 
          this.src = data.data.songs[0].al.picUrl;
          this.token = data.data.token
        })
        // 错误的回调
        .catch(err => {
          console.log(err);
        })
    }
  },
}
</script>
<style lang="">
  .side {
    height: 100vh;
    width: 200px;
    background-color: #333;
    position: absolute;
    top: 0;
  }
  .side a {
    color: aliceblue;
  }
</style>